<template>
  <a-modal
    :visible="show"
    width="50vw"
    min-height="60vh"
    :bodyStyle="bodystyle"
    title="公司选择器"
    @ok="handleOk"
    @cancel="show = false"
    :maskClosable="false"
    :key="show"
  >
    <a-form-model layout="inline" :model="pagination">
      <div class="filter-container" style="display: flex; justify-content: space-between">
        <div style="display: flex; justify-content: flex-start">
          <a-form-model-item label="查询关键字:" class="searchForm-item">
            <a-input v-model="pagination.keyword" @keyup.enter="handleSearch" />
          </a-form-model-item>
          <a-button type="primary" @click="handleSearch" style="height: 38px; margin-right: 5px" :loading="loading"
            >查询
          </a-button>
        </div>
        <div style="display: flex; justify-content: flex-end"></div>
      </div>
    </a-form-model>
    <div style="height: 55vh; overflow: scroll">
      <a-table
        :loading="loading"
        :columns="columns"
        :data-source="records"
        :pagination="false"
        rowKey="nid"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange,type:'radio' }"
        :customRow="customRow"
        bordered
        size="small"
      >
      </a-table>
    </div>
    <a-pagination
      show-size-changer
      :default-current="1"
      :total="pagination.total"
      @change="pageChange"
      @showSizeChange="onShowSizeChange"
      :show-total="(total) => `共 ${total} 条记录`"
    />
  </a-modal>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { formatDate, fermitTime } from '@/utils/util'
import { ColumnWidthMixin } from '@/views/materials/ColumnWidthMixin'
export default {
  mixins: [ColumnWidthMixin],
  name: 'ProjectSelector',
  props: {},
  components: {},
  data() {
    return {
      bodystyle: {
        height: '70vh',
        overflow: 'hidden',
      },
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ProjectSelector',
      },
      dictMap: [],
      records: [],
      searchForm: {},
      powers: {},
      orderNoSuggetions: [],
      loading: false,
      urls: {
        getCodeInfoList: '/manage/codeInfo/queryByTypePage',
      },
      columns: [
        {
          title: '公司代码',
          dataIndex: 'code',
          width: '120px',
          align: 'center',
          customCell: () => {
            return {
              style: {
                width: '100px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                cursor: 'pointer',
              },
            }
          },
          customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={text}>
              {text}
            </a-tooltip>
          ),
        },
        {
          title: '公司编码',
          dataIndex: 'parentid',
          width: '120px',
          align: 'center',
          customCell: () => {
            return {
              style: {
                width: '100px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                cursor: 'pointer',
              },
            }
          },
          customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={text}>
              {text}
            </a-tooltip>
          ),
        },
        {
          title: '公司名称',
          dataIndex: 'name',
          width: '120px',
          align: 'center',
          customCell: () => {
            return {
              style: {
                width: '250px',
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow: 'ellipsis',
                cursor: 'pointer',
              },
            }
          },
          customRender: (text, record) => (
            <a-tooltip placement="topLeft" title={text}>
              {text}
            </a-tooltip>
          ),
        },
      ],
      selectedRowKeys: [],
      // selectedRow: [],
      pagination: {
        offset: 0,
        total: 0,
        pageNo: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        orderItems: [
          { column: 'startTime', asc: false },
          { column: 'realLevel', asc: true },
        ],
        projectFirstClass: 'Z',
        projectClasses: '',
        projectSubType: '',
        type: null,
        keyword: '',
        hasLevel: '1',
        belongToStatus: null,
      },
      show: false,
      form: {},
      selectedRow: {},
    }
  },
  created() {},
  methods: {
    formatDate,
    fermitTime,
    openInit(form) {
      this.show = true
      this.searchForm = {}
      this.$set(this.pagination, 'pageNo', 1)
      this.records = []
      this.selectedRow = {};
      if (form) {
        for (let key in form) {
          this.$set(this.pagination, key, form[key])
        }
      }
      this.handleSearch()
    },
    handleSearch() {
      if (this.loading) {
        return
      }
      this.fetchList()
    },
    fetchList() {
      this.loading = true
      getAction(this.urls.getCodeInfoList, {
        type: '项目需求公司',
        pageNo: this.searchForm.pageNo,
        pageSize: this.searchForm.pageSize,
        keyword:this.pagination.keyword
      }).then((res) => {
        this.records = res.result.records || []
        this.$set(this.pagination, 'total', res.result.total)
        // if (this.records.length > 0) {
        //   this.records.forEach(function (item) {
        //     this.records.push({ value: item.parentid.trim(), label: item.name })
        //   })
        // }
        this.loading = false
      })
    },
    handleClose() {
      this.show = false
    },
    handleOk() {
      this.show = false
      this.$emit('close', this.selectedRow, this.pagination.returnParam)
      this.selectedRowKeys = [];
      this.selectedRow=null;
    },
    customRow(record) {
      return {
        on: {
          dblclick: (event) => {
            this.show = false
            this.$emit('close', record, this.pagination.returnParam)
            this.selectedRowKeys = [];
            this.selectedRow=null;
          },
          click: (event) => {
            this.selectedRow = record
            this.selectedRowKeys = [record.nid];
          },
        },
      }
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRow = selectedRows[0];
    },
    pageChange(pageNo, pageSize) {
      this.$set(this.pagination, 'pageSize', pageSize)
      this.$set(this.pagination, 'pageNo', pageNo)
      this.handleSearch()
    },
    onShowSizeChange(pageNo, pageSize) {
      this.$set(this.pagination, 'pageSize', pageSize)
      this.$set(this.pagination, 'pageNo', 1)
      this.handleSearch()
    },
  },
}
</script>

<style lang="less" scoped>
@import '~@assets/less/hte-main.less';

.demo-table-expand .a-form-model-item {
  margin-right: 0;
  margin-bottom: 0px;
}

.demo-table-expand span {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.a-form-model-item /deep/ .a-form-model-item--mini .a-form-model-item__label {
  color: #606266 !important;
  font-size: 12px !important;
  font-weight: normal;
}

.a-table /deep/ .a-table__expanded-cell[class*='cell'] {
  padding: 0px 0px 10px 0px;
}

.expand-title {
  height: 30px;
  line-height: 30px;
  background-color: #f1f1f1;
  padding-left: 50px;
  margin-bottom: 5px;
  font-size: 12px;
}

.a-form-model-item /deep/ .a-form-model-item__content {
  height: 36px;
}

.ellipse-tooltips {
  display: inline-block;
  white-space: nowrap;
  width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipse-tooltips span {
  width: unset !important;
}

.a-range /deep/ .a-range-separator {
  width: 20px;
}

.searchForm {
  display: flex;
  flex-direction: row;
}

.searchForm-left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 85vw;
}

.searchForm-right {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: 280px;
  border-left: #cccccc 2px solid;
}

.bodystyle {
  height: '80vh';
  overflow: 'hidden';
  overflow-y: 'scroll';
}

/deep/.ant-table-placeholder {
  height: 54vh !important;
}
</style>
